
<h2>Overview</h2>

	<p>inputEx is built around the <b>Field</b> class. It is an <b>abstract</b> class (we <i>never</i> instantiate it).<br/>
		 All the other field classes inherits directly or indirectly from this base class. (see diagram below)</p>
	
	<p><u>Warning:</u> this diagram is not complete. See <a href="treeview.html">treeview</a> for the full class diagram</p>
	<center>
		<img src="../images/inputEx-class-diagram.png" />
	</center>

	<p></p>

<h2>Instantiating a Field / the "type" property :</h2>
	
	<p>There are 3 ways to instantiate a Field :</p>
  <ul>
		<li>Calling the class constructor (classic) :<br />
<form><textarea name="code" class="JScript">
	var field = new inputEx.StringField({name: 'test'});
</textarea></form></li><br />
	  <li>Using the inputEx function with the "type" construction:<br /> 
<form><textarea name="code" class="JScript">
	var field = inputEx({ type: 'string', inputParams: {name: 'test'} });
</textarea></form></li><br/>

		<li>Through a meta-field (see below)</li>
	</ul>
	
	<p>The default "type" associations : (<u>Warning:</u> this table is not complete, but each class follow the same naming conventions.)</p>
	
<style>
#associationTypes {
	margin-left: 40px;
}
#associationTypes td {
	width: 200px;
	padding: 2px;
}
#associationTypes tr.odd {
	background-color: #aaaaff;
}
#associationTypes th {
	font-weight: bold;
	text-align: center;
	padding: 5px;
	background-color: white;
}
</style>
	<table id="associationTypes">
		<thead>
			<tr>
				<th>type string</th>
				<th>class</th>
				<th>loader module</th>
			</tr>
		</thead>
		<tbody>
			<tr class="odd">
				<td>boolean</td>
				<td>inputEx.CheckBox</td>
				<td>inputex-checkbox</td>
			</tr>
			<tr>
				<td>color</td>
				<td>inputEx.ColorField</td>
				<td>inputex-colorfield</td>
			</tr>
			<tr class="odd">
				<td>date</td>
				<td>inputEx.DateField</td>
				<td>inputex-datefield</td>
			</tr>
			<tr>
				<td>email</td>
				<td>inputEx.EmailField</td>
				<td>inputex-emailfield</td>
			</tr>
			<tr class="odd">
				<td>form</td>
				<td>inputEx.Form</td>
				<td>inputex-form</td>
			</tr>
			<tr>
				<td>group</td>
				<td>inputEx.Group</td>
				<td>inputex-group</td>
			</tr>
			<tr class="odd">
				<td>hidden</td>
				<td>inputEx.HiddenField</td>
				<td>inputex-hiddenfield</td>
			</tr>
			<tr>
				<td>html</td>
				<td>inputEx.RTEField</td>
				<td>inputex-rtefield</td>
			</tr>
			<tr class="odd">
				<td>inplaceedit</td>
				<td>inputEx.InPlaceEdit</td>
				<td>inputex-inplaceedit</td>
			</tr>
			<tr>
				<td>IPv4</td>
				<td>inputEx.IPv4Field</td>
				<td>inputex-ipv4field</td>
			</tr>
			<tr class="odd"><td>list</td>
				<td>inputEx.ListField</td>
				<td>inputex-listfield</td>
			</tr>
			<tr class="odd">
				<td>password</td>
				<td>inputEx.PasswordField</td>
				<td>inputex-passwordfield</td>
			</tr>
			<tr>
				<td>select</td>
				<td>inputEx.SelectField</td>
				<td>inputex-selectfield</td>
			</tr>
			<tr class="odd"><td>string</td>
				<td>inputEx.StringField</td>
				<td>inputex-stringfield</td>
			</tr>
			<tr>
				<td>text</td>
				<td>inputEx.Textarea</td>
				<td>inputex-textarea</td>
			</tr>
			<tr class="odd"><td>type</td>
				<td>inputEx.TypeField</td>
				<td>inputex-typefield</td>
			</tr>
			<tr>
				<td>uneditable</td>
				<td>inputEx.UneditableField</td>
				<td>inputex-uneditablefield</td>
			</tr>
			<tr class="odd">
				<td>url</td>
				<td>inputEx.UrlField</td>
				<td>inputex-urlfield</td>
			</tr>

		</tbody>
	</table>
	
	<p>To link a class with a "type", we use :</p>
<form><textarea name="code" class="JScript">
	inputEx.registerType(inputEx.StringField, 'string');
</textarea></form>
	
	<p></p>

<h2>Meta-Fields :</h2>

	<p>Some special fields called meta-fields take one or multiple "type" construction objects as configuration.</p>

	<ul>
		<li><b>Group</b>: A group of fields. It is itself a Field so it can be combined with any other field.</li>
			
		<li><b>Form</b>: A group that provide ajax form capabilities.</li>

		 <li><b>List</b>: list of any subfield.</li>
	
		 <li><b>InPlaceEdit</b>: Make any subfield inplace-editable.</li>

 		 <li><b>Typefield</b>: A special field that returns a config object to create an instance through the inputEx.buildField function. We create a form for each Field class to define the parameters for the specified field.</li>
		</ul>
					
		<p></p>

<h2>Insert a Field into the DOM :</h2>

<p></p>

<form><textarea name="code" class="JScript">
	var field = inputEx.FieldClass({...options...});
	parentEl.appendChild( field.getEl() );
	
	// or
	
	var field = inputEx.FieldClass({...options..., parentEl: parentEl});
	
	// or
		
	var field = inputEx.FieldClass({...options..., parentEl: 'parentElId'});
</textarea></form>

<p></p>
	
<h2>The "updated" event :</h2>

<p>All the fields fire the same event when they are "updated".</p>

<p>To subscribe this event for a field, use : (see <a href="http://developer.yahoo.com/yui/event/#customevent" target="_new">YUI Custom Events</a> for more informations)</p>

<form><textarea name="code" class="JScript">
	myField.updatedEvt.subscribe(function(e,value) {
		// value = new value returned by getValue
		...code here...
	}, scope, true);
</textarea></form>

<p>This event is fired when you use a setValue on the field. If you want to disable this behaviour, pass "false" as second argument to the setValue and the event won't be fired.</p>


<form><textarea name="code" class="JScript">
	// This setValue won't fire the updatedEvt
	myField.setValue("My Value", false);
</textarea></form>

